import '../../7_0_redux/index.css'
import ProfileSetting from './ProfileSetting'
import { createContext } from '../../8_hooks/2_sources/5_useContext';
import { useBearStore } from './store';

export const settingContext = createContext();

export default function Demo() {
    return <>
        <Header />
        <Setting />

        <p>
            1. zustand也太简洁了吧 <br />
            2. <a href='https://github.com/pmndrs/zustand'>github - zustand</a> <br />
            3. <a href='https://juejin.cn/post/7273126566460719165'>zustand介绍</a>
        </p>
    </>;
}

function Header() {
    const username = useBearStore((state) => state.username);
    const unReadCount = useBearStore((state) => state.unReadCount);
    return (
        <div className='header'>
            <span>{username}</span>
            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}

function Setting() {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
        </div>
    );
}

